<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>info.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="Css/style.css">
<link rel="stylesheet" type="text/css" href="Css/bootstrap.css">
<script type="text/javascript" src="Js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="Js/bootstrap.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body style="background:#EEEFF1;">
	<!-- header start-->
	<div class="container-fluid " style="background:#333;height:37px;">
		<div class="row ">
			<div class="col-md-2"></div>
			<div class="col-md-8 text-right" style="padding:8px;">
				<c:choose>
					<c:when test="${sessionScope.flag.equals('ok')}">
						<span class="label label-danger">你好,${sessionScope.username}</span>|<a
							href="<c:url value='/logoutServlet'/>?value=1" class="label label-primary">注销</a>
					</c:when>
					<c:otherwise>
						<a href="login.jsp"><span class="label label-info">登录</span></a>
						<em>|</em>
						<a href="register.jsp"><span class="label label-info">注册</span></a>
						<em>|</em>
						<a href="find1.html"><span class="label label-info">忘记密码</span></a>
					</c:otherwise>
				</c:choose>
			</div>
			<div class="col-md-2"></div>
		</div>
	</div>

	<div class="container-fluid " style="background:#328555;height:137px;">
		<div class="row ">
			<div class="col-md-2"></div>
			<div class="col-md-8">

				<img src="image/logo.png" style="margin:30px;" />

			</div>
			<div class="col-md-2"></div>
		</div>
	</div>
	<!-- header end-->
	<!-- navigation start -->
	<div class="container-fluid " style="background:#333;height:62px;">
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8">

				<ul class="nav nav-pills nav-justified" style="padding:10px;">
					<li role="presentation" class="span"><a href="index.jsp">首页</a></li>
					<li role="presentation" class="span"><a href="notification.html">咨询</a></li>
					<li role="presentation" class="span"><a href="<c:url value='/blogServlet'/>">论坛</a></li>
					<li role="presentation" class="span"><a href="#">广播</a></li>
					<li role="presentation" class="span"><a href="#">分组</a></li>
					<li role="presentation" class="span"><a href="<c:url value='/userInfoServlet'/>">个人中心</a></li>
				</ul>

			</div>
			<div class="col-md-2"></div>
		</div>
	</div>
	<!-- navigation ending -->
	<div class="container">
		<div class="row" style="height:10px;">
			<div class="col-md-12"></div>
		</div>

		<div class="row">
			<div class="col-md-1"></div>
			<div class="col-md-4">
				<div class="panel panel-info">
					<!-- Default panel contents -->
					<div class="panel-heading">你好,${sessionScope.username}</div>
					<div class="panel-body">
					
						<!--  <a class="thumbnail"> <img src="image/panda.png" alt="用户头像"
							style="width:300x;height:200px;">
						</a> 
						
				<form action="<c:url value='/changePhotoServlet'/>" method="post" enctype="multipart/form-data"
				>
				   <input type="text" name="txet">
						<input type="file" value="上传头像" name="file"/> <input type="submit"
							value="确定更换" />-->
						<!-- 这里是判断用户是否使用的是默认头像 -->
						<c:choose>
							<c:when test="${empty userInfo.headPortrait}">
								<div id="image">
									<img src="image/panda.png" alt="用户头像" style="width:300x;height:200px;">
									
								</div>	
							</c:when>
								
							<c:otherwise>
								<div id="image">
									<img src="${userInfo.headPortrait }" alt="用户头像" style="width:300x;height:200px;">
									
								</div>
							</c:otherwise>
						</c:choose>
				   <form action="<c:url value='/changePictureServlet'/>" method="post"  enctype="multipart/form-data">
						
						<label for="file"><img src="image/center.png" height="50px" width="50px" border="5px" /></label>
						<input type="file" id="file"  style="display: none" name="file"/><br/>
						<button type="submit" class="btn btn-info btn-lg btn-block">更换</button>
				   </form>
				</form>
					</div>

					<!-- Table -->
					<table class="table table-striped">
						<tr>
							<td>帖子数：${usertotal }</td>
						</tr>
						<tr>
							<td>积分：${userInfo.score }</td>
						</tr>
						<tr>
							<td>邮箱：${mail }</td>
						</tr>
						<tr>
							<td>吧龄：</td>
						</tr>
						<tr>
							<td>本站头衔：${userInfo.touxian }</td>
						</tr>

					</table>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-info">
					<!-- Default panel contents -->

					<div class="panel-heading">
						与我有关 <span class="badge">14</span>
					</div>
						<div class="panel-body">
							<!-- Nav tabs -->
							<ul class="nav nav-tabs" role="tablist">
								<li role="presentation" class="active"><a href="#home"
									aria-controls="home" role="tab" data-toggle="tab">我回复的</a></li>
								<li role="presentation"><a href="#profile"
									aria-controls="profile" role="tab" data-toggle="tab">回复我的</a></li>
								
							</ul>
	
							<!-- Tab panes -->
							<div class="tab-content">
								<div role="tabpanel" class="tab-pane fade in active" id="home">
									<div>djfbdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
									<p>kjdfndjkgnfdng</p>
									<p>dbsjfdsjfdnfj</p></div>
								</div>
								<div role="tabpanel" class="tab-pane fade" id="profile">
									  <marquee direction=left>啦啦啦，我从右向左移！</marquee>
								</div>
							</div>
						</div>

					<!-- Table -->
					<table class="table">

					</table>
				</div>


			</div>
		</div>
		<div class="row">

			<div class="col-md-1"></div>
			<div class="col-md-4">
				<div class="panel-group" id="accordion" role="tablist"
					aria-multiselectable="true">
					<div class="panel panel-info">
						<div class="panel-heading" role="tab" id="headingOne">
							<h4 class="panel-title">
								<a role="button" data-toggle="collapse" data-parent="#accordion"
									href="#collapseOne" aria-expanded="true"
									aria-controls="collapseOne"> 我的好友 </a>
							</h4>
						</div>
						<div id="collapseOne" class="panel-collapse collapse "
							role="tabpanel" aria-labelledby="headingOne">
							<div class="panel-body">
								<ul class="nav nav-pills nav-stacked">
									<li role="presentation"><a href="#"><img
											src="image/panda.png" alt="..."
											style="width:20px;height:20px;">&nbsp;涛崽</a></li>
									<li role="presentation"><a href="#">Profile</a></li>
									<li role="presentation"><a href="#">Messages</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="panel panel-info">
						<div class="panel-heading" role="tab" id="headingTwo">
							<h4 class="panel-title">
								<a class="collapsed" role="button" data-toggle="collapse"
									data-parent="#accordion" href="#collapseTwo"
									aria-expanded="false" aria-controls="collapseTwo"> 我的粉丝 </a>
							</h4>
						</div>
						<div id="collapseTwo" class="panel-collapse collapse"
							role="tabpanel" aria-labelledby="headingTwo">
							<div class="panel-body">
								<ul class="nav nav-pills nav-stacked">
									<li role="presentation"><a href="#"><img
											src="image/panda.png" alt="..."
											style="width:20px;height:20px;">&nbsp;涛崽</a></li>
									<li role="presentation"><a href="#">Profile</a></li>
									<li role="presentation"><a href="#">Messages</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<!-- header -->
	<div class="container-fluid " style="background:#333;height:80px;">
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8"></div>
			<div class="col-md-2"></div>
		</div>
	</div>
	<script>
		document.getElementById('file').onchange = function() {
			var imgFile = this.files[0];
			var fr = new FileReader();
			fr.onload = function() {
				document.getElementById('image').getElementsByTagName('img')[0].src = fr.result;
			};
			fr.readAsDataURL(imgFile);
		};
	</script>
	<!-- header ending -->
</body>
</html>
